<template>
  <div class="map">
    <div ref="mapContainer" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script setup>
import icon from "@/assets/images/blue_315.png";
import { onMounted, ref } from "vue";

import AMapLoader from "@amap/amap-jsapi-loader";

let AMap = null
let district = null;
const map = ref(null);
const mapContainer = ref(null);
const markers = ref([]); // 用于存储标记对象
const locations = ref([
  // 示例经纬度数据数组
  //   { lng: 116.397428, lat: 39.90923 },
  //   { lng: 117.13145, lat: 34.202782 },
]);
const width = 40;
const height = 40;

var opts = {
  subdistrict: 0,
  extensions: "all",
  level: "city",
};

const mapStyle = {
  features: [
    {
      type: "land", // 地形
      style: {
        // color: '#ffffff00' // 地形颜色为白色
      },
    },
  ],
};

function initMarkers(data) {
  locations.value = data;
  console.log(locations.value)
  locations.value.forEach((res) => {
    // 车辆角度胡
    let dir = 0
    if(res.dir>= 0 && res.dir<=45){
        dir = 0
    } else if(res.dir>= 45 && res.dir<90){
        dir = 45
    } else if(res.dir>= 90 && res.dir<135){
        dir = 90
    } else if(res.dir>= 135 && res.dir<180){
        dir = 135
    } else if(res.dir>= 180 && res.dir<225){
        dir = 180
    } else if(res.dir>= 225 && res.dir<315){
        dir = 225
    } else if(res.dir>= 315 && res.dir<345){
        dir = 315
    } else if(res.dir>= 345 && res.dir<360){
        dir = 360
    }
    const marker = new AMap.Marker({
      position: [Number(res.lng)+Number(res.glng), Number(res.lat)+Number(res.glat)], // 经纬度数据
      map: map.value, // 将标记添加到地图上
      //   icon:icon,
    //   ${res.dir}
      icon: new AMap.Icon({
        image: `http://139.129.18.80:8083/images/jiankong/pic/${res.obj.icon}/green_${dir}.png`,
        size: new AMap.Size(width, height), // 图标所处区域大小
        imageSize: new AMap.Size(width, height),
        rotation:res.dir,
        // rotation:90
      }),
      label: {
        content: res.obj.vehicle_name, // 标签内容
        offset: new AMap.Pixel(5, -5), // 标签偏移量
      },
    });
    // marker.value.setRotation(90);
    // marker.value.setRotation(190);
    markers.value.push(marker); // 将标记对象保存到数组中，便于后续操作（如清除标记）
    
  });
  
}

onMounted(async () => {
  AMap = await AMapLoader.load({
    key: "6e62bcf47b2ea7d4d9b215f06d2728a4", // 替换为你的API Key
    version: "2.0", // 使用最新的API版本
    plugins: [
      "AMap.ToolBar",
      "AMap.Driving",
      "AMap.Polygon",
      "AMap.DistrictSearch",
      "AMap.Object3DLayer",
      "AMap.Object3D",
      "AMap.Polyline",
    ],
  });
  map.value = new AMap.Map(mapContainer.value, {
    resizeEnable: true,
    zoom: 12, // 初始缩放级别
    // mapStyle: "amap://styles/darkblue",
    // mapStyle: "amap://styles/dark",
    // mapStyle: "amap://styles/whitesmoke",
    // mapStyle: "amap://styles/lightblue",
    // mapStyle: "amap://styles/grey",
    mapStyle: "amap://styles/fresh",
    // mapStyle: "amap://styles/blue",
    // center: [116.397428, 39.90923], // 初始中心点坐标（北京）
    center: [117.131399, 34.202782],
  });

 
});

defineExpose({ initMarkers });
</script>


<style lang="less" scoped>
.map {
  width: 96%;
  height: 96%;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 5%;
}
</style>

<style>
.amap-marker-label {
  background: #409eff;
  padding: 10px;
  color: #fff;
  font-size: 18px;
}
</style>